<template>
  <div>
    <h2>PersonInfo</h2>
    <div>firstName:<input type="text" v-model="person.firstName"/></div>
    <div>middleName:<input type="text" v-model="person.middleName"/></div>
    <div>lastName:<input type="text" v-model="person.lastName"/></div>
    <div>fullName:<input type="text" v-model="person.fullName"/></div>
    <button @click="updateFullName">改名字</button>
  </div>
</template>

<script lang='ts'>
interface Person{
  firstName:string,
  middleName:string,
  lastName:string,
  [propName:string]:any
}
import {reactive,computed} from 'vue'
export default {
  setup() {
    let person:Person=reactive({
      firstName:'翟',
      middleName:'吉',
      lastName:'喆'
    })
    //计算属性的标准写法
    person.fullName=computed({
      set(val:string){
        console.log('-------计算属性的set方法被执行了---------------');
        let arry=val.split(" ")
        person.firstName=arry[0]
        person.middleName=arry[1]
        person.lastName=arry[2]        
      },
      get(){
        return person.firstName+" "+person.middleName+" "+person.lastName
      }
    })
    const updateFullName=()=>{
      person.fullName="王 晓 峰"
    }
    return {
      person,
      updateFullName
    }
  }
}
</script>

<style lang='scss' scoped>

</style>